<template>
	<view class="player-wrap">
		<view v-if="!isPlayback && !isLiving" class="liveroom-status-text">
			<view>{{ statusText }}</view>
			<view
				v-if="allowPlayback"
				class="player-playback"
				@click="playback"
			>
				观看回放
			</view>
		</view>
		
		<!-- #ifdef MP-WEIXIN -->
		<wx-player
			:is-playback="isPlayback"
			:is-living="isLiving"
			:vod-info="vodInfo"
			:pull-url-info="pullUrlInfo"
			@controlstoggle="controlsToggle"
		/>
		<!-- #endif -->
		
		<!-- #ifdef H5 -->
		<h5-player
			:is-playback="isPlayback"
			:is-sp="isSp"
			:is-living="isLiving"
			:vod-info="vodInfo"
			:pull-url-info="pullUrlInfo"
			@controlstoggle="controlsToggle"
		/>
		<!-- #endif -->
		<view class="live-cover" v-if="roomInfo.status == 0 || openCover">
			<image :src="baseUrl+roomInfo.cover" mode="aspectFill" :style="{
			width: windowWidth,
			height: windowHeight,
		}"></image>
		</view>
	</view>
</template>

<script>
	import { mapGetters } from 'vuex';
	import { RoomStatus, RoomModeMap } from '@/utils/constants.js';
	import WxPlayer from './wxPlayer.vue';
	import H5Player from './h5Player/index.vue';
	
	export default {
		name: "player",
		components: {
			WxPlayer,
			H5Player,
		},
		props: {
			isPlayback: {
				type: Boolean,
				default: false,
			},
			isSp: {
				type: Boolean,
				default: false,
			},
		},
		data() {
			return {
				baseUrl: this.config.baseUrl,
				vodInfo: undefined, // 回看数据
				liveUrl: '', // 直播url
				osName: '',
				windowHeight: '100%',
				windowWidth: '100%',
				openCover:false
			};
		},
		created() {
			const res = uni.getSystemInfoSync();
			let that = this
			setTimeout(function(){
				if(that.roomInfo.liveType == 1){
					that.windowHeight = res.windowHeight + 45 + 'px';
				}else{
					that.windowHeight = 211 + 'px';
				}
				that.windowWidth = res.windowWidth + 'px';
			},1000)
			uni.$on('closeCover',function(){
				let authcode = uni.getStorageSync("authcode");
				if (!that.authcode) {
					that.toLogin()
				}else{
					that.openCover = false
				}
			})
			uni.$on('showCover',function(){
				that.openCover = true
			})
		},
		computed: {
			...mapGetters({
				roomInfo: 'liveroom/info',
			}),
			pullUrlInfo() {
				let ret = {}
				if (this.roomInfo.mode === RoomModeMap.normal) {
					ret = this.roomInfo.playUrl || {};
				} else if (this.roomInfo.mode === RoomModeMap.rtc) {
					// 连麦模式得用 linkInfo 下的拉流地址
					ret = this.roomInfo.linkInfo.cdnPullInfo || {};
				}
				return ret;
			},
			isLiving() {
				return this.roomInfo.status === RoomStatus.started;
			},
			statusText() {
				const map = {
					'-1': '正在进入直播间',
					0: '直播尚未开始~',
					2: '直播已结束~',
				};
				return map[this.roomInfo.status] || '';
			},
			allowPlayback() {
				const status = this.roomInfo.status;
				const vodInfo = this.roomInfo.vodInfo;
				if (
					status === RoomStatus.ended
					&& vodInfo
					&& vodInfo.status === 1
					&& vodInfo.playlist[0]
					&& vodInfo.playlist[0].playUrl
				) {
					return true;
				}
				return false;
			},
		},
		methods: {
			toLogin(){
				let authcode = uni.getStorageSync("authcode");
				if (!this.authcode) {
					let pages = getCurrentPages();
					let page = pages[pages.length - 1];
								// this.tips('2222')
					this.app.noLoginModals(page, '您暂未登陆，请登陆后再观看直播.',true);
				}
			},
			playback() {
				const vodInfo = this.roomInfo.vodInfo;
				if (!vodInfo || this.isPlayback) {
					return;
				}
				// 当前例子直播回看使用第一个播放地址，可根据您业务调整
				this.vodInfo = vodInfo.playlist[0];
				this.$emit('update-is-playback', true);
			},
			controlsToggle(bool) {
				this.$emit('controlstoggle', bool);
			},
		},
	};
</script>

<style lang="scss">
	@import 'player.scss';
	.live-cover{
		z-index: 10;
		width: 100%;
		position: absolute;
		top: 0;
		image{
			width: 100%;
		}
	}
</style>